<template>
    <div class="colunm-form">
        <el-form ref="form" :model="colunm" label-width="120px">

            <el-row>
                <el-col :span="24">
                    <el-form-item>
                        <template slot="label"><span style="color: red">*</span>拥有模块</template>
                        <el-select v-model="colunm.sysColunmId" multiple placeholder="请选择" style="width: 90%">
                            <el-option
                                    v-for="item in sysColunmItem"
                                    :key="item.id"
                                    :label="item.colunmName"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="12">
                    <el-form-item>
                        <template slot="label"><span style="color: red">*</span>栏目名称</template>
                        <el-input v-model="colunm.colunmName" maxlength="64" style="width:500px"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item>
                        <template slot="label"><span style="color: red"></span>栏目详情</template>
                        <el-input v-model="colunm.colunmDetail" maxlength="64" style="width:500px"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>


            <el-row>
                <el-col :span="12">
                    <el-form-item>
                        <template slot="label"><span style="color: red"></span>菜单图标</template>
                        <e-icon-picker v-model="colunm.colunmIcon" style="width:500px"/>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item>
                        <template slot="label"><span style="color: red"></span>排序</template>
                        <el-input v-model="colunm.sort" maxlength="64" style="width:500px"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>


            <el-row>
                <el-col :span="24">
                    <el-form-item label="备注:">
                        <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 8}" v-model="colunm.remarks" style="width:90%"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            
        </el-form>


        <div class="bottom-btn">
                <span slot="footer" class="dialog-footer">
                        <el-button @click="editDataBoxClose">取 消</el-button>
                        <el-button @click="clearDate">清 空</el-button>
                        <el-button type="primary" @click="onEditSubData">保 存 数 据</el-button>
                </span>
        </div>
        
        
    </div>
</template>

<script>
    import colunmApi from '@/api/colunm/colunmApi'
    export default {
        name: "ColunmForm",
        data(){
            return{
                uploadFilePath:process.env.VUE_APP_REQUEST_URL+'/a/core/file/fileUpload',
                colunm:{
                    id:'',
                    sysColunmId:'',
                    colunmName:'',
                    colunmIcon:'',
                    colunmDetail:'',
                    sort:'',
                    remarks:'',
                },
                sysColunmItem:[],
            }
        },
        methods:{
            editDataBoxClose(){
                this.$emit('editDataBoxClose',false)
            },
            async onEditSubData(){
                let res = '';
                if (this.colunm.id != ''){
                    res = await colunmApi.updateColunm(this.colunm)
                    if (res.code == '200'){
                        this.$emit('onUpdateSuccess',res.data)
                    }else {
                        this.$message.error(res.msg)
                    }
                }else {
                    res = await colunmApi.saveColunm(this.colunm)
                    if (res.code == '200'){
                        this.$emit('onAddSuccess',res.data)
                    }else {
                        this.$message.error(res.msg)
                    }
                }

            },
            clearDate(){
                let colunm={
                    colunmName:'',
                    colunmIcon:'',
                    colunmDetail:'',
                    sort:'',
                    remarks:'',
                }
                this.colunm = colunm
            },
            handleAvatarSuccess(res, file) {
                if (res.code=='200'){
                    this.colunm.colunmAddress =res.data;
                }else {
                    this.uploadError();
                }

            },
            uploadError() {
                this.$message.error('上传失败')
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            }
        },
        props:{
            editItemData:{
                require:true
            }
        },
        watch:{
            editItemData:{
                immediate: true,
                handler(newVal,oldVal){
                    if (newVal!=''){
                        this.colunm = newVal
                        let ids=newVal.sysColunmId.split(",");
                        let sysColunmId = new Array();
                        ids.forEach(item=>{
                            sysColunmId.push(item)
                        })
                        this.colunm.sysColunmId = sysColunmId;
                    }
                }
            }
        },
        created:async function () {
            let res = await colunmApi.getSysColunm();
            if (res.code == '200'){
                this.sysColunmItem = res.data
            }

        }
    }
</script>

<style scoped>

</style>